<script setup>
</script>
<template>
  <div class="dv-data-header">
    <div class="left">
      <div class="left-place"></div>
      <div class="left-date">
        <div class="date">2024年01月11日 星期四</div>
      </div>
    </div>
    <div class="center-title">
      <div class="text">数据可视化大标题</div>
    </div>
    <div class="right">
      <div class="right-date">
        <div class="date">16:00:00</div>
      </div>

      <div class="right-place"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.dv-data-header {
  display: flex;
  width: 100%;
  .left {
    flex: 670px 0 0;
    height: 85px;
    background: url("@/assets/img/header_left.png") no-repeat top left / 100%
      100%;
    position: relative;
    right: -2px;
    z-index: 10;
  }
  .left,
  .right {
    display: flex;
  }
  .date {
    padding-top: 55px;
    color: #9cd0ff;
    font-size: 16px;
  }
  .left-place {
    height: 50px;
    width: 165px;
    // background: url("@/assets/img/header_left_place.png") no-repeat top left /
    //   100% 100%;
  }
  .left-date {
    height: 50px;
    width: 365px;
    // background: url("@/assets/img/header_left_date.png") no-repeat top left /
    //   100% 100%;
    text-align: center;
    .date {
      margin-left: -10px;
    }
  }
  .center-title {
    // header_cener_bg.png
    flex: 1 0 0;
    height: 80px;
    background: url("@/assets/img/header_cener_bg.png") no-repeat top left /
      100% 86px;
    text-align: center;
    line-height: 80px;

    position: relative;
    z-index: 1;
    // color: #1975ff;
    .text {
      font-size: 42px;
      letter-spacing: 2px;
      font-family: "YouSheBiaoTiHei";
      background-image: -webkit-linear-gradient(top, #1975ff 10%, #fff, #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .right {
    flex: 670px 0 0;
    height: 85px;
    background: url("@/assets/img/header_right.png") no-repeat top left / 100%
      100%;
    position: relative;
    left: -2px;
    z-index: 10;
  }
  .right-date {
    height: 50px;
    flex: 1 0 0;
    // background: url("@/assets/img/header_right_date.png") no-repeat top left /
    //   100% 100%;
    text-align: center;
    .date {
      margin-left: 155px;
    }
  }
  .right-place {
    height: 50px;
    width: 165px;
    // background: url("@/assets/img/header_right_place.png") no-repeat top left /
    //   100% 100%;
  }
}
</style>